import React, {Component} from 'react';

class TodoFooter extends Component {
    render() {
        const arrLength = this.props.todoList.length;
        // 1
        // let checkedNum = 0;
        // this.props.todoList.forEach(v=>{
        //     if(v.isChecked) checkedNum++;
        // })

        // 2
        // const checkedNum = this.props.todoList.filter(v=>v.isChecked).length;

        // 3
        const checkedNum = this.props.todoList.reduce((prevNum,item)=>{
            if(item.isChecked) prevNum++;
            return prevNum;
        },0)

        let isAllChecked = checkedNum===arrLength;
        if(checkedNum === 0 && arrLength ===0){
            isAllChecked = false;
        }
        return (
            <div className="todo-footer">
                <label>
                    <input onChange={()=>this.props.changeCheckedAll(!isAllChecked)} checked={isAllChecked} type="checkbox"/>
                </label>
                <span>已选{checkedNum} / 全部{arrLength}</span>
                <button style={{display:checkedNum>0?"block":"none"}} className="btn btn-danger" onClick={this.props.delAllChecked}>清除已选择任务</button>
            </div>
        );
    }
}

export default TodoFooter;